<!DOCTYPE html>
<html lang="zh-Hans">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="../css/materialize.css">
  <style>
    .demo1{
      height: 300px;
      border: 1px solid grey;
    }
    .valign{
      width: 100%;
    }
    /*img{*/
      /*max-width: 100%;*/
    /*}*/
    .demo2{
    }
    .demo3{
      width: 190px;
    }
  </style>
</head>
<body>
  <div class="valign-wrapper demo1">
    <div class="valign center-align">这里应该是垂直居中对齐的</div>
  </div>
  <div class="hide-on-small-only">
    <h4 class="truncate demo3">不要截断我不要截断我不要截断我不要截断我</h4>
    <div class="card-panel demo2 hoverable">
      <img class="responsive-img circle" src="http://www.materializecss.cn/images/sample-1.jpg" alt="">
    </div>
  </div>
</body>
</html>

<script src="../js/materialize.js"></script>